<script setup>
// import { GetTreeAPI } from '@/api/system/shopAdministration/modeling'
// import { GetCalendarAPI } from '@/api/schedule/common.js'
import { GetCalendarAPI } from '@/api/schedule/scheduleConfig/shopCalendar'
import dayjs from 'dayjs'

// 加载状态
const loading = ref(false)

// 空状态
const empty = ref(false)

// 日历ref
const calendar = ref(null)

// 工厂线别数据
const options = ref([])

// 时间
const dater = dayjs(new Date())

// 后台数据
const calendarData = ref([])

const query = reactive({
  year: dater.format('YYYY'),
  month: new Date().getMonth() + 1,
  lineId: '',
})

//处理日期获取后台数据动态渲染上去
const textContent = (date) => {
  //当前date是拿到上面日历组件当前的日期值 根据该值去筛选测试数据找到对应各个日期下对应的数据return出去
  if (!Array.isArray(calendarData.value)) return []
  return calendarData.value.filter((item) => item.data == date)
}

// 上一月 下一月 。。。。
const selectDate = async (val, date) => {
  const yearInd = date.indexOf('年')
  const monthInd = date.indexOf('月')
  let year = date.slice(0, yearInd - 1)
  let month = date.slice(yearInd + 2, monthInd - 1)
  // 上一年  减 一年
  if (val == 'prev-year') {
    year--
  }
  // 上个月
  if (val == 'prev-month') {
    if (month <= 1) {
      month = 12
      year--
    } else {
      month = month - 1
    }
  }
  // 当前时间
  if (val == 'today') {
    year = dater.format('YYYY')
    month = new Date().getMonth() + 1
  }
  // 下个月
  if (val == 'next-month') {
    if (month >= 12) {
      month = 1
      year++
    } else {
      month++
    }
  }
  // 下一年  加 一年
  if (val == 'next-year') {
    year++
  }

  query.year = year
  query.month = month
  getCalendar()
  calendar.value.selectDate(val || 'today')
}

// 车间选择改变时候
const cascaderChange = (val) => {
  // query.lineId = val.id
  // getCalendar()
}

// 获取工厂数据
const get = async () => {
  //   const res = await GetTreeAPI()
  //   options.value = res.theDrop
  //   options.value
}

// 获取日历数据
const getCalendar = async (val) => {
  try {
    empty.value = false
    loading.value = true
    const res = await GetCalendarAPI(query)
    calendarData.value = res.data
    loading.value = false
  } catch {
    empty.value = true
  } finally {
    loading.value = false
  }
}
get()
getCalendar()

defineExpose({
  getCalendar,
})
</script>

<template>
  <div class="app-container">
    <p-install-place
      v-model="query.lineId"
      @change="getCalendar"
    ></p-install-place>
    <el-empty v-if="empty && !loading">
      <el-button type="primary" @click="getCalendar">点击重试</el-button>
    </el-empty>
    <el-calendar ref="calendar" v-loading="loading" v-else>
      <template #header="{ date }">
        <span>{{ date }}</span>
        <el-button-group>
          <el-button size="small" @click="selectDate('prev-year', date)">
            上一年
          </el-button>
          <el-button size="small" @click="selectDate('prev-month', date)">
            上月
          </el-button>
          <el-button size="small" @click="selectDate('today', date)"
            >当前月</el-button
          >
          <el-button size="small" @click="selectDate('next-month', date)">
            下月</el-button
          >
          <el-button size="small" @click="selectDate('next-year', date)">
            下一年</el-button
          >
        </el-button-group>
      </template>
      <template #dateCell="{ data }">
        <div class="time">
          <p :class="data.isSelected ? 'is-selected' : ''">
            {{ data.day.split('-').slice(1).join('-') }}
            {{ data.isSelected ? '✔️' : '' }}
          </p>
          <el-tag
            type="danger"
            v-if="
              (textContent(data.day).length <= 0 && calendarData != 0) ||
              calendarData.length == 0
            "
          >
            {{ '工作日' }}</el-tag
          >
        </div>

        <div v-for="(item, index) in textContent(data.day)" :key="item.date">
          <e-row>
            <el-col class="center">
              <el-tag type="danger" v-if="item.status == 0">
                {{ item.msg }}
              </el-tag>
              <el-tag type="success" v-if="item.status == 2">
                {{ item.msg }}
              </el-tag>
              <el-tag type="warning" v-if="item.status == 3"
                >{{ item.msg }}
              </el-tag>
              <el-tag v-if="item.status == 4"> {{ item.msg }}</el-tag>
            </el-col>
          </e-row>
        </div>
        <!-- <div v-if="textContent(data.day).length <= 0"><el-tag>上班</el-tag></div> -->
      </template>
    </el-calendar>
  </div>
</template>

<style lang="scss" scoped>
.is-selected {
  color: #061626;
}
// .el-calendar-table:not(.is-range) td.prev,
// .el-calendar-table:not(.is-range) td.next {
//   pointer-events: none;
// // }
// .el-calendar-table__row > .prev > .el-calendar-day > .time {
//   display: none !important;
// }
// // .next > .el-calendar-day > p {
// //   display: none;
// // }

// ::v-deep div.el-calendar {
//   .el-calendar-table:not(.is-range) td.next .el-calendar-day .time {
//     /*隐藏下个月的日期*/

//     visibility: hidden;
//   }

//   .el-calendar-table:not(.is-range) td.prev .el-calendar-day .time {
//     /*隐藏上个月的日期*/

//     visibility: hidden;
//   }
// }
// //隐藏其他月份，只显示当月

// .el-calendar__header {
//   display: none;
// }
</style>
